<template>
    <div id="mapdiv" style="width:60%;height:80%">
        
            <!-- <map-vie/> -->
    </div>
</template>


<script>
export default {
    // name:'App',
    // components: {
    //     MapVie
    // }
    mounted() {
        var map =new BMapGL.Map("mapdiv")
        map.centerAndZoom(new BMapGL.Point(112.36380, 28.55967), 15); // 初始化地图,设置中心点坐标和地图级别
        map.enableScrollWheelZoom();
        var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
        map.addControl(scaleCtrl);
        var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
        map.addControl(zoomCtrl);

        // 创建定位控件
        var locationControl = new BMapGL.LocationControl({
            // 控件的停靠位置（可选，默认左上角）
            anchor: BMAP_ANCHOR_TOP_RIGHT,
            // 控件基于停靠位置的偏移量（可选）
            offset: new BMapGL.Size(20, 20)
        });
        // 将控件添加到地图上
        map.addControl(locationControl);

        // 添加定位事件
        locationControl.addEventListener("locationSuccess", function(e){
            var address = '';
            address += e.addressComponent.province;
            address += e.addressComponent.city;
            address += e.addressComponent.district;
            address += e.addressComponent.street;
            address += e.addressComponent.streetNumber;
            alert("当前定位地址为：" + address);
        });
        locationControl.addEventListener("locationError",function(e){
            alert(e.message);
        });

        // 创建城市选择控件
        var cityControl = new BMapGL.CityListControl({
            // 控件的停靠位置（可选，默认左上角）
            anchor: BMAP_ANCHOR_TOP_LEFT,
            // 控件基于停靠位置的偏移量（可选）
            offset: new BMapGL.Size(10, 5)
        });
        // 将控件添加到地图上
        map.addControl(cityControl);
        
        
    }
}
</script>

<style lang="less" scoped>
html,body{
  padding: 0;
  margin: 0;
  height: 100%;
}
// #app {
//   font-family: 'Avenir', Helvetica, Arial, sans-serif;
//   -webkit-font-smoothing: antialiased;
//   -moz-osx-font-smoothing: grayscale;
//   color: #2c3e50;
//   width: 100%;
//   height: 100%;
// }

</style>>
